<template>
  <div class="app-container">
    <u-page-config
      :filter-array="filterArray"
      v-model="filter"
      :actionBtn="actionBtn"
      label-width="100px"
      :getList="getList"
      :tableData="tableData"
      :tableColumn="tableColumn"
      :total="total"
      :loading="loading"
      showSelection
      @handleSelectionChange="handleSelectionChange"
      @addRow="addRow"
      @removeRow="removeRow"
      @editRow="editRow"
    >
    </u-page-config>
    <!-- 修改问题 -->
    <el-dialog :title="title" :visible.sync="visible" width="1200px" :close-on-click-modal="false">
        <u-form
          ref="uFormRef"
          label-width='134px'
          v-model="form"
          :defaultForm="defaultForm"
          :formArray="formArray"
          :detail-array="formArray"
          :show-btn="false"
          @submit="onsubmit"
          @close="visible = false"
          :mode="mode"
        >
        </u-form>
    </el-dialog>
  </div>
</template>

<script>
import UPageConfig from '@/components/uPageConfig/index'
import UForm from '@/components/uForm'
import table from "@/mixin/uTable";
import Treeselect from "@riophae/vue-treeselect";
import {
  questionList,
  questionAdd,
  questionUp,
  questionDel
} from "@/api/info/cjwt";
export default {
  name: "cjwt",
  mixins: [table],
  //3
  components: {UPageConfig, UForm, Treeselect},
  data() {
    return {
      form: {
      },
      filterArray: [
        {label: "问题", key: "question", type: "input"}
      ],
      tableColumn: [
        {label: "问题", prop: "question"},
        {label: "回答", prop: "answer"},
        {
          label: "操作", type: "btn", attr: {width: 180}, btnArr: [
            {
              icon: "el-icon-edit-outline",
              text: "修改",
              emit: "editRow",
              permissions: 'info:cjwt:edit'
            },
            {
              icon: "el-icon-delete",
              text: "删除",
              emit: "removeRow",
              permissions: 'info:cjwt:remove'
            },
          ]
        }
      ],
      actionBtn: [
        {
          type: 'primary',
          text: '新增',
          icon: 'el-icon-plus',
          emit: 'addRow',
          permissions: 'info:cjwt:add'
        },
        {
          type: 'success',
          text: '修改',
          icon: 'el-icon-edit',
          emit: 'editRow',
          permissions: 'info:cjwt:edit',
          disabledRule: () => this.ids.length !== 1
        },
        {
          type: 'danger',
          text: '删除',
          icon: 'el-icon-delete',
          emit: 'removeRow',
          permissions: 'info:cjwt:remove',
          disabledRule: () => this.ids.length === 0
        },
       
      ],
      // 修改表单默认必填参数 重置表单时需要用到
      defaultForm: {
        question:'',
        answer:'',
        sort:1
      },
      formArray: [
        {
          label: "问题：", key: "question", col: 24, type: "textarea",rows:4,
          rule: {required: true, message: '问题不能为空！', trigger: 'blur'},
        },
        {
          label: "回答：", key: "answer", col: 24, type: "textarea",rows:4,
          rule: {required: true, message: '回答不能为空！', trigger: 'blur'},
        },
        {
          label: "排序：", key: "sort", col: 12, type: "number",
          rule: {required: true, message: '排序不能为空！', trigger: 'blur'},
        },
       
        
      ],
    };
  },
 
  methods: {

    // 表单提交接口相关配置
    formSubmitFunConfig() {
      return {
        addFunc: questionAdd,
        modifyFunc: questionUp,
        pk: 'id',
        options: {
          ...this.form,
        },
        cbFunc: () => {
          this.visible = false
        }
      }
    },
    // 删除
    removeRow(row) {
      const id = row ? [row.id] : this.ids;
      this.removeTip(async () => {
        await questionDel(id)
      }, row && row.id ? '该项数据' : '已勾选项数据')
    },
    // 添加
    addRow() {
      this.mode = 'form';
      this.title = "添加问题";
      this.visible = true;
    },
    // 修改
    async editRow(row) {
      this.mode = 'form'
      this.title = "修改问题";
      if (row) { //点击的表格内修改按钮
        this.form = JSON.parse(JSON.stringify({
          ...row,
        }))
      } else { //点击表格上方修改按钮
        const selectedItem = this.tableData.find(item => this.ids[0] === item.id) || {}
        this.form = JSON.parse(JSON.stringify({
          ...selectedItem,
        }))
      }
      this.visible = true
    },
    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
    },

    /** 查询问题列表 */
    getList() {
      this.getInit(questionList, {})
    },


    /** 返回设备部署页面 */
    goBack() {
      this.$router.go(-1);
    },

  },
 
}
</script>

<style lang="scss" scoped>
.form-item-wrap {
  display: flex;
}

</style>
